<template>
  <div class="sanstyle" style="position: relative">
    <!--左边 B-->
    <div>
      <div class="ssl" style="position: relative">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">实时诱捕器</span>
            <br/>
            <span class="xwz">Real-time trap</span>
          </div>
        </div>
        <!--标题 E-->

        <!--监控列表 B-->
        <div class="jklb">
          <!--<div class="ssk" style="margin-top: .15rem;">
            <input type="text" placeholder="设备名称/区域查询" v-model="keyword"/>
            <img style="cursor: pointer" src="/static/images/ss.png" alt="">
          </div>-->
          <div style="margin-top: .2rem;"></div>
          <div class="lbbox" v-for="(item,index) in list" :key="index">
            <div><span>{{item.yxzt}}</span><span style="margin-left: .2rem;">{{item.deviceId}}</span></div>
            <!--<span class="icon iconfont icon-huifang"></span>-->
            <div><span class="icon iconfont icon-Vector" @click="looki(item.surfacePlotUrl)"></span></div>
          </div>
        </div>
        <!--监控列表 E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <!--tab切换 B-->
      <div class="qhtab" style="top: .1rem;left: .34rem">
        <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
          <span style="margin-left: .08rem;">{{item.name}}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <div id="map" style="width: 100%;height: 100%;"></div>
    </div>
    <!--中间 E-->

    <div class="clearfix slbh">
      <div v-for="(item,index) in list" :key="index" @click="looki(item.surfacePlotUrl)">
        <img :src="item.surfacePlotUrl" v-if="item.surfacePlotUrl!=null" alt="">
        <img src="/static/images/np.jpg" v-else alt="">
      </div>
    </div>

    <div class="zhezhao" v-if="isShow">
      <div>
        <div class="closei">
          <img style="width: 100%;height: 100%;" @click="clearLove"
               src="/static/images/guanbi.png" alt="">
        </div>
        <div class="xuanzhuan">
          <img style="width: 100%;height: 100%;" @click="xuanzhaun"
               src="/static/images/xuanzhuan.png" alt="">
        </div>

        <!--图片 B-->
        <div class="imgBox" id="imgBox">
          <img id="pcr" :src="lovePhoto" alt="">
        </div>
        <!--图片 E-->

        <!--轮播图 B-->
        <div class="lbxtimg">
          <!--左边B-->
          <div class="jianmotua">
            <img @click="lmv" src="/static/images/leftjiantou.png" alt="">
          </div>
          <!--左边E-->

          <!--l轮播图容器 B-->
          <div class="lbtbox">
            <ul class="clearfix" id="imgul" :style="{width:2.3*imglist.length+'rem' }">
              <li v-for="(item,index) in imglist" :key="index"
                  :style="item.fill?'border: 2px solid #2EFFF2;':'border:none'" @click="xbdimg(item)">
                <img :src="iscloud(item.url)" alt="">
              </li>
            </ul>
          </div>
          <!--l轮播图容器 E-->

          <!--右边B-->
          <div class="jianmotua" @click="rmv">
            <img src="/static/images/rightjainotu.png" alt="">
          </div>
          <!--右边E-->
        </div>
        <!--轮播图 E-->


      </div>
    </div>
  </div>
</template>

<script>
  import http from '../utils/http'
  import api from '../utils/api'
  import * as echarts from 'echarts';

  export default {
    name: "slbh",
    data() {
      return {
        list: [],
        areaId: "",
        jkd: [],
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        maptype: "gnqh",
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ],
        imglist: [],
        idx: 0,
        xz: 0,
        isShow: false,
        lovePhoto: ""
      }
    },
    mounted() {
      let vm = this;
      (async function f() {
        let res = await http.get('/papi/' + vm.areaId + '_json/gnqh.json')
        let arr = [];
        res.data.features.forEach(t => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.getysy();
      })();
      const _that = this
      window.onresize = () => {
        return (() => {
          let maxWidth = $('#imgBox').width();
          let maxHeight = $('#imgBox').height();
          let path = $('#pcr').attr('src');
          _that.AutoSize(path, maxWidth, maxHeight);
        })()
      }
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');

    },
    methods: {
      clearLove() {
        this.idx = 0;
        this.xz = 0;
        this.isShow = false;
      },
      xuanzhaun() {
        this.xz++;
        $("#pcr").css({transform: 'rotate(' + (this.xz * 90) + 'deg)'})
      },
      xbdimg(data) {
        this.imglist.forEach(e => {
          if (e.url == data.url) {
            e.fill = true
          } else {
            e.fill = false
          }
        })
        this.lovePhoto = data.url;
        this.xz = 0;
        $("#pcr").css({transform: 'rotate(0deg)'})
        let vm = this;
        setTimeout(function () {
          let maxWidth = $('#imgBox').width();
          let maxHeight = $('#imgBox').height();
          let path = $('#pcr').attr('src');
          vm.AutoSize(path, maxWidth, maxHeight);
        }, 500)
      },
      lmv() {
        let target = $('#imgul'), vm = this;
        if (this.idx < (this.imglist.length - 4)) {
          vm.idx++;
          target.stop().animate({left: (-vm.idx * 2.3) + .4 + "rem"}, 500)
        }
      },
      rmv() {
        let target = $('#imgul'), vm = this;
        if (this.idx > 0) {
          vm.idx--;
          target.stop().animate({left: -vm.idx * 2.3 + "rem"}, 500)
        }
      },
      AutoSize(Img, maxWidth, maxHeight) {
        let image = new Image();
        image.src = Img;
        image.onload = function () {
          if (image.width < maxWidth && image.height < maxHeight) {
            $("#pcr").css({width: image.width, height: image.height})
          } else {
            if (maxWidth / maxHeight <= image.width / image.height) {
              $("#pcr").animate({width: maxWidth, height: maxWidth * (image.height / image.width)}, 'fast');
            } else {
              $("#pcr").animate({width: maxHeight * (image.width / image.height), height: maxHeight}, 'fast');
            }
          }
        }
      },
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|150h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_150,m_lfit'
        }
      },
      looki(item) {
        if (item == null || item == '') {
          this.$message({
            message: '该相机未上传照片',
            type: 'warning'
          });
        } else {
          let arr = [{fill: false, url: item}], vm = this;

          if (arr.length > 0) {
            arr[0].fill = true;
            this.lovePhoto = arr[0].url;
            this.imglist = arr;
            setTimeout(function () {
              vm.isShow = true;
              setTimeout(function () {
                let maxWidth = $('#imgBox').width();
                let maxHeight = $('#imgBox').height();
                let path = $('#pcr').attr('src');
                vm.AutoSize(path, maxWidth, maxHeight);
              }, 500)
            }, 500)
          } else {
            this.$message({
              message: '该物种暂无图像资料,请尽快补充',
              type: 'warning'
            });
          }
        }


      },
      getysy() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.trapPage, {
            pageNum: 1,
            pageSize: 999,
            areaId: vm.areaId
          })
          if (res.data.code == '200') {
            vm.list = res.data.data.content;
            if (vm.list.length > 0) {
              let jkd = [];
              vm.list.forEach(t => {
                let z = {value: [t.lon, t.lat], url: t.surfacePlotUrl}
                jkd.push(z)
              })
              vm.jkd = jkd;
              setTimeout(function () {
                vm.datamap(vm.maptype);
              }, 500)
            }
          }
        })()
      },
      datamap(flag) {
        this.maptype = flag;
        this.navList.forEach(e => {
          if (flag == e.type) {
            e.sts = true
          } else {
            e.sts = false
          }
        })
        if (flag == 'gnqh') {
          let url = '/papi/' + this.areaId + '_json/gnqh.json';
          let jsondata = [];
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          let geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          this.map(url, geo)
        }
        if (flag == 'wg') {
          let geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          let url = '/papi/' + this.areaId + '_json/wangge.json';
          this.map(url, geo)
        }
      },
      map(url, geo) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(url, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          let option = {
            geo: geo,
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/shexiangtou.png',
                legendHoverLink: true,
                symbolSize: [20, 24],
                data: vm.jkd,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
            ]
          }
          myChart.setOption(option, true);
          setTimeout(function () {
            myChart.hideLoading();
            myChart.resize();
          }, 500);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          ///3、在渲染点击事件之前先清除点击事件
          myChart.off('click')
          myChart.on('click', function (params) {
            if (params.componentSubType == "scatter") {
              vm.looki(params.data.url);
            }
          });

        });
      },
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
  @import "../../static/css/spjk.css";

  .slbh {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .slbh::-webkit-scrollbar { /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .slbh::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(46, 255, 242, 0.6);
  }

  .slbh > div {
    float: left;
    width: 50%;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .1rem 0;
    cursor: pointer;
  }

  .slbh > div > img {
    width: 95%;
    height: 100%;
  }

</style>
